<template>
  <div class="index-page">
    <router-view></router-view>
    <footer>
      <ul>
        <li>
          <router-link to="/home-page">
            <img src="@/assets/icons/home-a.png" alt="" class="tab-icon" />
            <p class="tab-text">首页</p>
          </router-link>
        </li>
        <li>
          <router-link to="/category-page">
            <img src="@/assets/icons/category.png" alt="" class="tab-icon" />
            <p class="tab-text">分类</p></router-link
          >
        </li>
        <li>
          <router-link to="/cart-page">
            <img src="@/assets/icons/cart.png" alt="" class="tab-icon" />
            <p class="tab-text">购物车</p></router-link
          >
        </li>
        <li>
          <router-link to="/mine-page">
            <img src="@/assets/icons/mine.png" alt="" class="tab-icon" />
            <p class="tab-text">首页</p></router-link
          >
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less">
.index-page {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  margin: 0 auto;
  footer {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      li {
        flex: 1;
        text-align: center;
        a{
          display: block;
          width: 100%;
          height: 100%;
          padding-top: 5px;
        }
      }
    }
  }
}

.tab-icon {
  width: 22px;
  height: 22px;
}
.tab-text {
  font-size: 12px;
}

.router-link-active {
  color:#02AC36;
}
</style>
